<script setup lang="ts">
import TimeLine from './TimeLine.vue';
import ColorController from './ColorController.vue';
import { ref } from 'vue';

const tabsIndex = ref(0)
</script>
<template>
    <div class="bottom-box">
        <div class="bottom-tabs">
            <button class="tabs-btn" :class="{'active-tab': tabsIndex == 0}" @click="tabsIndex = 0">
                渐变
            </button>
            <button class="tabs-btn" :class="{'active-tab': tabsIndex == 1}" @click="tabsIndex = 1">
                时间线
            </button>
        </div>
        <TimeLine v-if="tabsIndex == 1" />
        <ColorController v-else />
    </div>
</template>
<style scoped>
.bottom-box {
    background-color: #242424;
    border-radius: 0.3rem;
    padding: 0.5rem;
    margin-top: 0.1rem;
}

.bottom-tabs {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
}

.bottom-tabs>.tabs-btn:hover {
    outline: none;
    border: none;
}

.bottom-tabs>.tabs-btn {
    outline: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    color: #fff;
    font-size: 0.75rem;
    border: none;
}

.bottom-tabs>.active-tab{
    background: none;
    color: #bbbbbb;
}
</style>